// import $ from "jquery"

// type Options = {
//   svgId: string
//   width?: number
//   height?: number
//   strokeColor?: string
//   strokeWidth?: number
//   animateTime?: number
//   interval?: number
//   fadeOutTime?: number
//   lifeTime?: number
//   leftRight?: number
//   easing?: "swing" | 'linear'
//   animationTimeRange?: [number, number],
//   timer?: NodeJS.Timer,
// }

// export class Ckline {
//   public options = {
//     svgId: 'CCanvas',
//     width: 0,
//     height: 0,
//     strokeColor: "#f2f3f4",
//     strokeWidth: 1,
//     animateTime: 1600,
//     interval: 600,
//     fadeOutTime: 800,
//     lifeTime: 1600,
//     leftRight: false,
//     easing: "swing",
//     animationTimeRange: [800, 1600],
//     timer: null
//   }
//   public timer: NodeJS.Timer | null = null
//   public el: HTMLElement | null = null

//   constructor(options: Options) {
//     Object.assign(this.options, options)

//     let svg = document.getElementById(this.options.svgId)

//     if (!svg) return
//     this.el = svg
//     this.options.width = svg.clientWidth
//     this.options.height = svg.clientHeight
//     if (this.options.timer) {
//       this.timer = this.options.timer
//       this.destroy()
//     }
//     this.timer = setInterval(() => {
//       // 整个组件的定时器。只要清除这个定时器，组件内部的定时器在执行完毕后会自动关闭
//       if (!document.getElementById(this.options.svgId) && this.timer) clearInterval(this.timer)
//       this.creatLine()
//       this.animate()
//     }, this.options.interval)
//   }

//   creatLine() {
//     const width = this.options.width
//     const height = this.options.height
//     var startItemsWidth = new Array(0, width),
//       ramdomItemWidth =
//         startItemsWidth[Math.floor(Math.random() * startItemsWidth.length)],
//       startItemsHeight = new Array(0, height),
//       ramdomItemHeight =
//         startItemsHeight[Math.floor(Math.random() * startItemsHeight.length)]

//     var svgns = "http://www.w3.org/2000/svg"
//     var x1 = ramdomItemWidth,
//       y1 = Math.random() * height,
//       x2,
//       y2 = Math.random() * height

//     var randomBool = true

//     if (this.options.leftRight === false) {
//       randomBool = Math.random() >= 0.5
//     }
//     if (randomBool == true) {
//       x1 = ramdomItemWidth
//       if (ramdomItemWidth === 0) {
//         x2 = width
//       } else {
//         x2 = 0
//       }
//     } else {
//       var range1 = Math.floor(Math.random() * width) + 0
//       var range2 = Math.floor(Math.random() * width) + 0
//       x1 = range1
//       x2 = range2
//       y1 = ramdomItemHeight
//       if (ramdomItemHeight === 0) {
//         y2 = height
//       } else {
//         y2 = 0
//       }
//     }
//     //var line = document.createElementNS(svgns, 'line');
//     var line = document.createElementNS(svgns, "path") as SVGPathElement
//     line.setAttributeNS(
//       null,
//       "d",
//       "M " + x1 + "," + y1 + " L " + x2 + "," + y2
//     )
//     line.setAttributeNS(null, "stroke-width", String(this.options.strokeWidth))
//     line.setAttributeNS(null, "stroke", String(this.options.strokeColor))
//     line.setAttributeNS(null, "class", "line off")

//     document.getElementById(this.options.svgId)?.appendChild(line)

//     var length = line.getTotalLength()

//     line.setAttributeNS(null, "stroke-dasharray", String(length))
//     line.setAttributeNS(null, "stroke-dashoffset", String(length))
//   }

//   animate() {
//     var time = 5
//     if (this.options.animationTimeRange) {
//       time = Math.floor(
//         Math.random() *
//         (this.options.animationTimeRange[1] -
//           this.options.animationTimeRange[0] +
//           1) +
//         this.options.animationTimeRange[0]
//       )
//     }
//     let easing = this.options.easing
//     let fadeOutTime = this.options.fadeOutTime
//     let lifeTime = this.options.lifeTime
//     $(".line.off").each(function () {
//       $(this).addClass("on").removeClass("off")
//       $(this).animate(
//         {
//           "stroke-dashoffset": 0,
//         },
//         time,
//         easing
//       )
//       var $this = $(this)
//       setTimeout(function () {
//         $this.fadeOut(fadeOutTime, function () {
//           $(this).remove()
//         })
//       }, lifeTime)
//     })
//   }

//   destroy() {
//     if (!this.timer) return
//     clearInterval(this.timer)
//     this.el && (this.el.innerHTML = '')
//   }
// }

